import { useState, useEffect } from "react";
import { useTheme } from "@/hooks/useTheme";
import { toast } from "sonner";
import { ScrollText, Heart, Clock, BarChart, ChevronRight, Search, Menu, X, Sun, Moon, Dumbbell, Flame, Award, Instagram, Twitter, Youtube, Mail, Utensils } from "lucide-react";
import { NavLink, useNavigate } from "react-router-dom";

// 定义健身类别数据
const fitnessCategories = [
  {
    id: 1,
    title: "力量训练",
    icon: <Dumbbell size={24} />,
    description: "增强肌肉力量和耐力的专业训练方法",
    color: "bg-blue-500",
    image: "https://space.coze.cn/api/coze_space/gen_image?image_size=square_hd&prompt=muscular%20man%20doing%20bench%20press%20in%20gym&sign=4a874f552bab479beec318bc6dee1eed"
  },
  {
    id: 2,
    title: "有氧运动",
    icon: <Flame size={24} />,
    description: "提升心肺功能和燃烧脂肪的高效训练",
    color: "bg-orange-500",
    image: "https://space.coze.cn/api/coze_space/gen_image?image_size=square_hd&prompt=people%20jogging%20in%20park%20in%20morning&sign=c55875772045b302e5ce6ef2b3f7dad1"
  },
  {
    id: 3,
    title: "瑜伽塑形",
    icon: <Heart size={24} />,
    description: "增强柔韧性和平衡感的身心训练",
    color: "bg-green-500",
    image: "https://space.coze.cn/api/coze_space/gen_image?image_size=square_hd&prompt=woman%20doing%20yoga%20in%20garden&sign=7d24559f5f248253b060e407eba6cde1"
  },
  {
    id: 4,
    title: "营养指导",
    icon: <BarChart size={24} />,
    description: "科学饮食搭配，助力健身目标达成",
    color: "bg-purple-500",
    image: "https://space.coze.cn/api/coze_space/gen_image?image_size=square_hd&prompt=healthy%20food%20salad%20with%20vegetables%20and%20protein&sign=978f33aec933b9b974f12eb3be0a7a73"
  },
  {
    id: 5,
    title: "饮食计划",
    icon: <Utensils size={24} />,
    description: "科学的饮食安排，助力健身目标达成",
    color: "bg-green-500",
    image: "https://space.coze.cn/api/coze_space/gen_image?image_size=square_hd&prompt=healthy%20meal%20plan%20nutrition%20table&sign=1ef41e30753bac3a4c1e60c88820a126"
  }
];

// 定义热门知识点数据
const popularKnowledge = [
  {
    id: 1,
    title: "如何正确进行深蹲训练",
    category: "力量训练",
    readTime: "8分钟",
    image: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=correct%20squat%20form%20guide&sign=006567502655e633707d2d8657f69bc4"
  },
  {
    id: 2,
    title: "健身后如何科学补充营养",
    category: "营养指导",
    readTime: "6分钟",
    image: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=post-workout%20nutrition%20meal&sign=f3ee65d73f650a41a8f05fd423cec193"
  },
  {
    id: 3,
    title: "新手如何制定健身计划",
    category: "力量训练",
    readTime: "10分钟",
    image: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=beginner%20workout%20plan%20chart&sign=6d361e1285b7694e30c2920b5d8c2ecf"
  },
  {
    id: 4,
    title: "15分钟高效居家燃脂训练",
    category: "有氧运动",
    readTime: "5分钟",
    image: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=home%20workout%20routine%20no%20equipment&sign=612f8167d9ea988ae01da5e2d9c00f83"
  }
];

// 定义健身视频数据
const fitnessVideos = [
  {
    id: 1,
    title: "30分钟全身力量训练",
    instructor: "张教练",
    duration: "30:15",
    views: "12.5万",
    image: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=full%20body%20workout%20video%20thumbnail&sign=86967d7218281a5e1f1e3c8a80aeef91"
  },
  {
    id: 2,
    title: "初学者瑜伽基础课程",
    instructor: "李瑜伽",
    duration: "45:30",
    views: "8.3万",
    image: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=yoga%20for%20beginners%20video%20thumbnail&sign=641a21c247356dc61200b96c8a4153da"
  },
  {
    id: 3,
    title: "15分钟腹肌训练",
    instructor: "王教练",
    duration: "15:45",
    views: "15.7万",
    image: "https://space.coze.cn/api/coze_space/gen_image?image_size=landscape_16_9&prompt=abs%20workout%20video%20thumbnail&sign=659cdcf1e7a078ef3ce8bd01ee99bc48"
  }
];

// 定义用户评价数据
const userTestimonials = [
  {
    id: 1,
    name: "小明",
    avatar: "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=young%20asian%20man%20smiling&sign=802a61e36458b57ec4851443ba36e930",
    role: "健身爱好者",
    comment: "通过这个平台的指导，我在三个月内减掉了15公斤，身体状态明显改善！",
    rating: 5
  },
  {
    id: 2,
    name: "小红",
    avatar: "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=young%20asian%20woman%20smiling&sign=8d6b7b558bd812f1ab33a9a87ea64adc",
    role: "瑜伽教练",
    comment: "这里的瑜伽教程非常专业，我经常推荐给我的学员们！",
    rating: 5
  },
  {
    id: 3,
    name: "老张",
    avatar: "https://space.coze.cn/api/coze_space/gen_image?image_size=square&prompt=middle-aged%20asian%20man%20smiling&sign=24d5bb55e32c3560c80c8580bcbaa3fc",
    role: "办公室职员",
    comment: "工作繁忙没时间去健身房，这里的居家训练课程帮了我大忙！",
    rating: 4
  }
];

// 主组件
export default function Home() {
  const { theme, toggleTheme } = useTheme();
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [activeCategory, setActiveCategory] = useState(0);
  const navigate = useNavigate();

  // 监听滚动事件，添加导航栏滚动效果
  const [scrolled, setScrolled] = useState(false);
  
  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 20) {
        setScrolled(true);
      } else {
        setScrolled(false);
      }
    };
    
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // 渲染评分星星
  const renderStars = (rating: number) => {
    return Array(5).fill(0).map((_, index) => (
      <i key={index} className={`fa-solid ${index < rating ? 'text-yellow-400' : 'text-gray-300 dark:text-gray-600'}`}>
        {index < rating ? '★' : '☆'}
      </i>
    ));
  };

  return (
    <div className={`min-h-screen flex flex-col ${theme === 'dark' ? 'dark bg-slate-900 text-white' : 'bg-white text-slate-900'}`}>
      {/* 导航栏 */}
      <header 
        className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${
          scrolled 
            ? 'bg-white/90 dark:bg-slate-900/90 backdrop-blur-md shadow-md py-2' 
            : 'bg-transparent py-4'
        }`}
      >
        <div className="container mx-auto px-4 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Dumbbell className="text-blue-600 dark:text-blue-400" size={28} />
            <h1 className="text-xl md:text-2xl font-bold bg-gradient-to-r from-blue-600 to-orange-500 bg-clip-text text-transparent">
              FitMaster
            </h1>
          </div>
          
          {/* 桌面导航 */}
          <nav className="hidden md:flex items-center gap-8">
            <NavLink to="/" className="font-medium text-slate-700 hover:text-blue-600 dark:text-slate-200 dark:hover:text-blue-400 transition-colors">
              首页
            </NavLink>
        <NavLink to="/categories" className="font-medium text-slate-700 hover:text-blue-600 dark:text-slate-200 dark:hover:text-blue-400 transition-colors">
          知识分享
        </NavLink>
             <NavLink to="/3month-plan" className="font-medium text-slate-700 hover:text-blue-600 dark:text-slate-200 dark:hover:text-blue-400 transition-colors">
              3个月计划
            </NavLink>
            <NavLink to="/plans" className="font-medium text-slate-700 hover:text-blue-600 dark:text-slate-200 dark:hover:text-blue-400 transition-colors">
              计划
            </NavLink>
            <NavLink to="/nutrition" className="font-medium text-slate-700 hover:text-blue-600 dark:text-slate-200 dark:hover:text-blue-400 transition-colors">
              营养
            </NavLink>
  <NavLink to="/philosophy" className="font-medium text-slate-700 hover:text-blue-600 dark:text-slate-200 dark:hover:text-blue-400 transition-colors">
    哲学
  </NavLink>
  <NavLink to="/five-day-split" className="font-medium text-slate-700 hover:text-blue-600 dark:text-slate-200 dark:hover:text-blue-400 transition-colors">
    五分化训练
  </NavLink>
  <NavLink to="/diet-plan" className="font-medium text-slate-700 hover:text-blue-600 dark:text-slate-200 dark:hover:text-blue-400 transition-colors">
    饮食计划
  </NavLink>
          </nav>
          
          <div className="flex items-center gap-4">
            {/* 搜索按钮 */}
            <button className="p-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors">
              <Search size={20} className="text-slate-600 dark:text-slate-300" />
            </button>
            
            {/* 主题切换 */}
            <button 
              onClick={toggleTheme} 
              className="p-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
              aria-label={theme === 'dark' ? '切换到浅色模式' : '切换到深色模式'}
            >
              {theme === 'dark' ? (
                <Sun size={20} className="text-yellow-400" />
              ) : (
                <Moon size={20} className="text-slate-600" />
              )}
            </button>
            
            {/* 移动端菜单按钮 */}
            <button 
              className="md:hidden p-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
              onClick={() => setIsMenuOpen(!isMenuOpen)}
              aria-label={isMenuOpen ? '关闭菜单' : '打开菜单'}
            >
              {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
            </button>
          </div>
        </div>
        
        {/* 移动端导航菜单 */}
        {isMenuOpen && (
          <div className="md:hidden absolute top-full left-0 right-0 bg-white dark:bg-slate-800 shadow-lg rounded-b-2xl p-4 animate-in slide-in-from-top duration-300">
            <nav className="flex flex-col gap-4">
              <NavLink 
                to="/" 
                className="font-medium p-2 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors"
                onClick={() => setIsMenuOpen(false)}
              >
                首页
              </NavLink>
              <NavLink 
                to="/categories" 
                className="font-medium p-2 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors"
                onClick={() => setIsMenuOpen(false)}
              >
          分享
        </NavLink>
               <NavLink 
                to="/3month-plan" 
                className="font-medium p-2 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors"
                onClick={() => setIsMenuOpen(false)}
              >
                3个月计划
              </NavLink>
              <NavLink 
                to="/plans" 
                className="font-medium p-2 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors"
                onClick={() => setIsMenuOpen(false)}
              >
                计划
              </NavLink>
              <NavLink 
                to="/nutrition" 
                className="font-medium p-2 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors"
                onClick={() => setIsMenuOpen(false)}
              >
                营养
              </NavLink>
            </nav>
          </div>
        )}
      </header>

      <main className="flex-grow pt-20">
        {/* 英雄区域 */}
        <section className="relative overflow-hidden">
          {/* 背景渐变 */}
          <div className="absolute inset-0 bg-gradient-to-br from-blue-50 via-white to-orange-50 dark:from-blue-900/30 dark:via-slate-900 dark:to-orange-900/30"></div>
          
          {/* 装饰图形 */}
          <div className="absolute top-0 left-0 w-full h-full overflow-hidden">
            <div className="absolute top-1/4 left-1/4 w-64 h-64 bg-blue-400/20 dark:bg-blue-500/10 rounded-full blur-3xl"></div>
            <div className="absolute bottom-1/4 right-1/4 w-80 h-80 bg-orange-400/20 dark:bg-orange-500/10 rounded-full blur-3xl"></div>
          </div>
          
          <div className="container mx-auto px-4 py-16 md:py-28 relative z-10">
            <div className="max-w-3xl mx-auto text-center">
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight">
                <span className="bg-gradient-to-r from-blue-600 to-orange-500 bg-clip-text text-transparent">
                  解锁你的健身潜能
                </span>
              </h1>
              <p className="text-xl md:text-2xl text-slate-600 dark:text-slate-300 mb-10 leading-relaxed">
                专业的健身知识、科学的训练计划，助你达成健身目标，拥有理想身材
              </p>
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <button className="px-8 py-3 rounded-full bg-blue-600 text-white font-semibold shadow-lg shadow-blue-500/30 hover:shadow-blue-500/50 hover:bg-blue-700 transition-all duration-300 transform hover:-translate-y-1">
                  开始训练
                </button>
                <button className="px-8 py-3 rounded-full bg-white dark:bg-slate-800 text-blue-600 dark:text-blue-400 font-semibold shadow-lg shadow-slate-200/50 dark:shadow-slate-700/50 hover:shadow-slate-300/50 dark:hover:shadow-slate-600/50 transition-all duration-300 transform hover:-translate-y-1">
                  了解更多
                </button>
              </div>
            </div>
          </div>
          
          {/* 波浪分隔线 */}
          <div className="absolute bottom-0 left-0 right-0">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 120" fill="currentColor" className="w-full h-auto text-white dark:text-slate-900">
              <path d="M0,96L80,85.3C160,75,320,53,480,48C640,43,800,53,960,64C1120,75,1280,85,1360,90.7L1440,96L1440,120L1360,120C1280,120,1120,120,960,120C800,120,640,120,480,120C320,120,160,120,80,120L0,120Z"></path>
            </svg>
          </div>
        </section>

        {/* 健身类别区域 */}
        <section className="py-16 bg-white dark:bg-slate-900">
          <div className="container mx-auto px-4">
            <div className="text-center mb-12">
              <h2 className="text-3xl md:text-4xl font-bold mb-4">
                探索健身类别
              </h2>
              <p className="text-slate-600 dark:text-slate-400 max-w-2xl mx-auto">
                选择适合你的健身方式，开启健康生活之旅
              </p>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              {fitnessCategories.map((category, index) => (
                <div 
                  key={category.id}
                  className={`group relative rounded-2xl overflow-hidden shadow-xl transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 ${
                    index === activeCategory ? 'ring-2 ring-blue-500 dark:ring-blue-400' : ''
                  }`}
                   onClick={() => {
                     setActiveCategory(index);
                     navigate(`/categories?category=${encodeURIComponent(category.title)}`);
                   }}
                >
                  {/* 类别图片 */}
                  <div className="aspect-square relative overflow-hidden">
                    <img 
                      src={category.image} 
                      alt={category.title}
                      className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
                    />
                    {/* 渐变叠加 */}
                    <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent"></div>
                  </div>
                  
                  {/* 类别内容 */}
                  <div className="absolute inset-0 flex flex-col justify-end p-6">
                    <div className={`${category.color} w-12 h-12 rounded-full flex items-center justify-center mb-4 opacity-90 group-hover:opacity-100 transition-opacity`}>
                      {category.icon}
                    </div>
                    <h3 className="text-xl font-bold text-white mb-2">{category.title}</h3>
                    <p className="text-white/80 mb-4">{category.description}</p>
                    <button 
                      className="flex items-center text-white font-medium opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300"
                         onClick={(e) => {
                          e.stopPropagation();
                          if (category.id === 1) {
                            // 力量训练跳转到详情页
                            window.location.href = "/strength-training";
                          } else if (category.id === 2) {
                            // 有氧运动跳转到指南页
                            window.location.href = "/aerobic-exercise-guide";
                          } else if (category.id === 3) {
                            // 瑜伽塑形跳转到指南页
                            window.location.href = "/yoga-shaping-guide";
                           } else if (index === 4) {
                            // 个性化计划
                            window.location.href = "/personalized-fitness-plan";
                           } else {
                            // 其他类别暂时显示提示
                            setActiveCategory(index);
                            toast('该类别即将上线，敬请期待！');
                          }
                        }}
                    >
                      查看详情 <ChevronRight size={16} className="ml-1" />
                    </button>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* 热门知识点区域 */}
        <section className="py-16 bg-slate-50 dark:bg-slate-800/50">
          <div className="container mx-auto px-4">
            <div className="flex flex-col md:flex-row md:items-end justify-between mb-10">
              <div>
                <h2 className="text-3xl md:text-4xl font-bold mb-4">
                  热门健身知识
                </h2>
                <p className="text-slate-600 dark:text-slate-400 max-w-2xl">
                  了解科学健身知识，避免运动伤害，提高训练效果
                </p>
              </div>
              <button className="mt-4 md:mt-0 px-6 py-2 rounded-full bg-white dark:bg-slate-700 text-blue-600 dark:text-blue-400 font-medium shadow-md hover:shadow-lg transition-all duration-300 flex items-center">
                查看全部 <ChevronRight size={16} className="ml-1" />
              </button>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              {popularKnowledge.map((item) => (
                <div 
                  key={item.id}
                  className="group bg-white dark:bg-slate-800 rounded-2xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300"
                >
                  {/* 知识点图片 */}
                  <div className="aspect-video relative overflow-hidden">
                    <img 
                      src={item.image} 
                      alt={item.title}
                      className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
                    />
                    {/* 分类标签 */}
                    <div className="absolute top-3 left-3 bg-blue-600 text-white text-xs font-medium px-2 py-1 rounded-full">
                      {item.category}
                    </div>
                  </div>
                  
                  {/* 知识点内容 */}
                  <div className="p-5">
                    <h3 className="text-lg font-semibold mb-2 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
                      {item.title}
                    </h3>
                    <div className="flex items-center text-sm text-slate-500 dark:text-slate-400 mt-4">
                      <Clock size={14} className="mr-1" />
                      <span>{item.readTime}</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

         {/* 3个月健身计划简介 */}
        <section className="py-16 bg-gradient-to-br from-blue-50 via-white to-green-50 dark:from-blue-900/30 dark:via-slate-900 dark:to-green-900/30">
          <div className="container mx-auto px-4">
            <div className="text-center mb-12">
              <h2 className="text-3xl md:text-4xl font-bold mb-4">
                3个月健身计划
              </h2>
              <p className="text-slate-600 dark:text-slate-300 max-w-2xl mx-auto">
                从有氧爬坡开始，每10天一个周期，循序渐进地过渡到力量训练，助您达成健身目标
              </p>
            </div>
            
            <div className="max-w-4xl mx-auto">
              <div className="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-xl">
                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                  <div className="text-center p-4 bg-blue-50 dark:bg-blue-900/20 rounded-xl">
                    <div className="w-16 h-16 mx-auto rounded-full bg-blue-100 dark:bg-blue-800 flex items-center justify-center mb-4">
                      <i className="fa-solid fa-heartbeat text-2xl text-blue-600 dark:text-blue-400"></i>
                    </div>
                    <h3 className="font-semibold mb-2">第一阶段</h3>
                    <p className="text-sm text-slate-600 dark:text-slate-300">
                      有氧爬坡基础
                    </p>
                  </div>
                  
                  <div className="text-center p-4 bg-green-50 dark:bg-green-900/20 rounded-xl">
                    <div className="w-16 h-16 mx-auto rounded-full bg-green-100 dark:bg-green-800 flex items-center justify-center mb-4">
                      <i className="fa-solid fa-dumbbell text-2xl text-green-600 dark:text-green-400"></i>
                    </div>
                    <h3 className="font-semibold mb-2">第二阶段</h3>
                    <p className="text-sm text-slate-600 dark:text-slate-300">
                      力量训练入门
                    </p>
                  </div>
                  
                  <div className="text-center p-4 bg-purple-50 dark:bg-purple-900/20 rounded-xl">
                    <div className="w-16 h-16 mx-auto rounded-full bg-purple-100 dark:bg-purple-800 flex items-center justify-center mb-4">
                      <i className="fa-solid fa-person-running text-2xl text-purple-600 dark:text-purple-400"></i>
                    </div>
                    <h3 className="font-semibold mb-2">第三阶段</h3>
                    <p className="text-sm text-slate-600 dark:text-slate-300">
                      综合提升阶段
                    </p>
                  </div>
                </div>
                
                <div className="mt-8 text-center">
                  <button 
                    onClick={() => window.location.href = "/3month-plan"}
                    className="px-8 py-3 rounded-full bg-gradient-to-r from-blue-600 to-green-500 text-white font-semibold shadow-lg shadow-blue-500/30 hover:shadow-blue-500/50 transition-all duration-300 transform hover:-translate-y-1"
                  >
                    查看完整计划
                  </button>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* 用户评价区域 */}
        <section className="py-16 bg-slate-50 dark:bg-slate-800/50 relative overflow-hidden">
          {/* 装饰图形 */}
          <div className="absolute top-0 right-0 w-full h-full overflow-hidden -z-10">
            <div className="absolute top-1/4 right-1/4 w-80 h-80 bg-blue-400/10 dark:bg-blue-500/5 rounded-full blur-3xl"></div>
          </div>
          
          <div className="container mx-auto px-4">
            <div className="text-center mb-12">
              <h2 className="text-3xl md:text-4xl font-bold mb-4">
                用户的真实反馈
              </h2>
              <p className="text-slate-600 dark:text-slate-400 max-w-2xl mx-auto">
                看看其他健身爱好者如何通过我们的平台改变自己
              </p>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
              {userTestimonials.map((testimonial) => (
                <div 
                  key={testimonial.id}
                  className="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300"
                >
                  {/* 评分 */}
                  <div className="flex mb-4">
                    {renderStars(testimonial.rating)}
                  </div>
                  
                  {/* 评价内容 */}
                  <p className="text-slate-600 dark:text-slate-300 mb-6 italic">
                    "{testimonial.comment}"
                  </p>
                  
                  {/* 用户信息 */}
                  <div className="flex items-center">
                    <img 
                      src={testimonial.avatar} 
                      alt={testimonial.name}
                      className="w-12 h-12 rounded-full object-cover mr-4"
                    />
                    <div>
                      <h4 className="font-semibold">{testimonial.name}</h4>
                      <p className="text-sm text-slate-500 dark:text-slate-400">{testimonial.role}</p>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* 订阅区域 */}
        <section className="py-20 bg-gradient-to-r from-blue-600 to-orange-500 text-white relative overflow-hidden">
          {/* 装饰图形 */}
          <div className="absolute inset-0 overflow-hidden">
            <div className="absolute top-1/3 left-1/4 w-64 h-64 bg-white/10 rounded-full blur-3xl"></div>
            <div className="absolute bottom-1/3 right-1/4 w-80 h-80 bg-white/10 rounded-full blur-3xl"></div>
          </div>
          
          <div className="container mx-auto px-4 relative z-10">
            <div className="max-w-3xl mx-auto text-center">
              <h2 className="text-3xl md:text-4xl font-bold mb-6">
                订阅健身资讯
              </h2>
              <p className="text-xl text-white/90 mb-10">
                获取最新的健身知识、训练计划和营养建议，助力你达成健身目标
              </p>
              
              <div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
                <input 
                  type="email" 
                  placeholder="请输入你的邮箱"
                  className="px-6 py-3 rounded-full text-slate-800 w-full sm:w-auto sm:flex-1 max-w-md focus:outline-none focus:ring-2 focus:ring-white"
                />
                <button className="px-8 py-3 rounded-full bg-white text-blue-600 font-semibold shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
                  立即订阅
                </button>
              </div>
              
              <p className="text-sm text-white/70">
                我们尊重你的隐私，不会向第三方分享你的信息
              </p>
            </div>
          </div>
        </section>
      </main>

      {/* 页脚 */}
      <footer className="bg-slate-900 text-white pt-16 pb-8">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 mb-12">
            {/* 关于我们 */}
            <div>
              <div className="flex items-center gap-2 mb-6">
                <Dumbbell className="text-blue-400" size={24} />
                <h2 className="text-xl font-bold">FitMaster</h2>
              </div>
              <p className="text-slate-400 mb-6">
                FitMaster 是专业的健身知识教学平台，致力于为健身爱好者提供科学、专业的健身指导。
              </p>
              <div className="flex gap-4">
                <a href="#" className="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-blue-600 transition-colors">
                  <Instagram size={18} />
                </a>
                <a href="#" className="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-blue-600 transition-colors">
                  <Twitter size={18} />
                </a>
                <a href="#" className="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-blue-600 transition-colors">
                  <Youtube size={18} />
                </a>
                <a href="#" className="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-blue-600 transition-colors">
                  <Mail size={18} />
                </a>
              </div>
            </div>
            
            {/* 快速链接 */}
            <div>
              <h3 className="text-lg font-semibold mb-6">快速链接</h3>
              <ul className="space-y-3">
                <li><a href="#" className="text-slate-400 hover:text-white transition-colors">首页</a></li>
                <li><a href="#" className="text-slate-400 hover:text-white transition-colors">健身分类</a></li>
                <li><a href="#" className="text-slate-400 hover:text-white transition-colors">视频教程</a></li>
                <li><a href="#" className="text-slate-400 hover:text-white transition-colors">健身计划</a></li>
                <li><a href="#" className="text-slate-400 hover:text-white transition-colors">营养指导</a></li>
                <li><a href="#" className="text-slate-400 hover:text-white transition-colors">关于我们</a></li>
              </ul>
            </div>
            
            {/* 联系我们 */}
            <div>
              <h3 className="text-lg font-semibold mb-6">联系我们</h3>
              <ul className="space-y-3">
                <li className="flex items-start">
                  <i className="fa-solid fa-map-marker-alt mt-1 mr-3 text-slate-400"></i>
                  <span className="text-slate-400">北京市朝阳区健身大厦1001室</span>
                </li>
                <li className="flex items-center">
                  <i className="fa-solid fa-phone mr-3 text-slate-400"></i>
                  <span className="text-slate-400">+86 123 4567 8910</span>
                </li>
                <li className="flex items-center">
                  <i className="fa-solid fa-envelope mr-3 text-slate-400"></i>
                  <span className="text-slate-400">contact@fitmaster.com</span>
                </li>
              </ul>
            </div>
            
            {/* 下载应用 */}
            <div>
              <h3 className="text-lg font-semibold mb-6">下载应用</h3>
              <p className="text-slate-400 mb-4">
                随时随地获取健身指导，下载我们的移动应用
              </p>
              <div className="flex flex-col gap-3">
                <a href="#" className="px-4 py-2 bg-slate-800 rounded-lg flex items-center hover:bg-slate-700 transition-colors">
                  <i className="fa-brands fa-apple text-2xl mr-3"></i>
                  <div>
                    <div className="text-xs">下载</div>
                    <div className="font-semibold">App Store</div>
                  </div>
                </a>
                <a href="#" className="px-4 py-2 bg-slate-800 rounded-lg flex items-center hover:bg-slate-700 transition-colors">
                  <i className="fa-brands fa-android text-2xl mr-3"></i>
                  <div>
                    <div className="text-xs">下载</div>
                    <div className="font-semibold">Google Play</div>
                  </div>
                </a>
              </div>
            </div>
          </div>
          
          {/* 版权信息 */}
          <div className="pt-8 border-t border-slate-800 text-center text-slate-500 text-sm">
            <p>© {new Date().getFullYear()} FitMaster. 保留所有权利。</p>
          </div>
        </div>
      </footer>
    </div>
  );
}